<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.mongodb.client.MongoCursor,org.bson.Document" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>教学材料类型列表</title>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<%MongoCursor<Document> typeList = (MongoCursor<Document>)request.getAttribute("result");%>
	<jsp:include page="../navbar.html" />
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-1 col-md-offset-10">
				<a href="addTeachingMaterialsType.jsp">
					<button type="button" class="btn btn-default"><em class="fa fa-plus"></em> 添加</button>
				</a>
			</div>
		</div>	
		<div class="row mt15">
			<div class="col-md-10 col-md-offset-1">
			<%if(!typeList.hasNext()) {%>
				<div class="col-md-6 col-md-offset-3">
					<div class="panel panel-default">
	                	<div class="panel-body">	                		
							<h5 class="text-center text-muted">暂无教学材料类型，快去添加吧</h5>
						</div>
					</div>
				</div>
			<%} else { 
					while(typeList.hasNext()) {
						Document document = typeList.next();
						String id = document.getString("id");
						String name = document.getString("name");
						String explain = document.getString("explain");
						boolean ishand = document.getBoolean("ishand");
						String mark = document.getString("mark");
				%>
				<div class="col-md-3 col-md-4 col-sm-4 col-xs-6">
					<div class="panel" style="border-bottom:4px solid #337ab7;box-shadow: -5px -5px 5px #eee;">
						<div class="panel-body text-center">
		                  <div class="clearfix discover">
		                   	<div class="pull-left text-info">
		                        ID: <%=id %>
		                     </div>
		                     <div class="pull-right">
								<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="查看详情" onclick='editType("<%=id %>","<%=name %>","<%=explain %>","<%=ishand %>","<%=mark %>")'>
									<em class="fa fa-search"></em>
								</button>
								<a href="teachingMaterialsTypeServlet?_id=<%=document.getObjectId("_id") %>&method=delete">
									<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="删除">
										<em class="fa fa-trash"></em>
									</button>
								</a>	
		                     </div>
		                  </div>
		                  <div class="mt38 mb38">
		                  	  <a class="text-muted file-manage">
			                     <h4><em class="fa fa-file-o"></em> <%=name %></h4>
			                  </a>
		                  </div>
		                  <div class="clearfix m0 text-primary">
		                  	<%if(ishand==true) { %>
		                     <small class="pull-right">必交</small>
		                     <%} else {%>
		                      <small class="pull-right">不必交</small>
		                     <%} %>
		                  </div>
		               </div>
					</div>
				</div>
				<%} %>
				<%} %>
			</div>
		</div>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:120px">
		<div class="modal-dialog" style="width: 480px">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						教学材料类型信息
					</h4>
				</div>
				<div class="modal-body">
				 	<div style="padding: 5px 15px">					 	
				 		<p><em class="fa fa-star fontsize20 fontcolor"></em><span id="id" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-file-o fontsize20 fontcolor"></em><span id="name" class="ml20 fontsize16"></span></p>
				 		<p><em class="fa fa-list-alt fontsize20 fontcolor"></em><span id="explain" class="ml20 fontsize16"></span></p>
				 		<P><em class="fa fa-hand-peace-o fontsize20 fontcolor"></em><span id="ishand" class="ml20 fontsize16"></span></P>
				 		<p><em class="fa fa-bookmark fontsize20 fontcolor"></em><span id="mark" class="ml20 fontsize16"></span></p>
				 	</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	$("#myModal").modal("hide");//加载页面首先隐藏模态框，指向模态框的ID
		function editType(id, name, explain, ishand, mark) {//a链接的参数
			$("#myModal").modal("show");//显示模态框
			
			//将a标签传递的参数获取到，并显示在模态框里
			document.getElementById('id').innerHTML = "类型ID： "+id;
			document.getElementById('name').innerHTML = "类型名称： "+name;
			document.getElementById('explain').innerHTML = "类型说明： "+explain;
			if(ishand) {
				document.getElementById('ishand').innerHTML = "是否必交：是";
			}
			else {
				document.getElementById('ishand').innerHTML = "是否必交：否";
			}
			document.getElementById('mark').innerHTML = "备注："+mark;
		}
		$(function () { $("[data-toggle='tooltip']").tooltip(); });  
	</script>
</body>
</html>